<template>
  <div class="main">
    <!-- <div class="headerInput">
      <a-form layout="inline" style="width:100%">
        <a-form-item label="Find" class="searchInputBox">
          <a-input placeholder v-model="searchText" />
        </a-form-item>
        <a-form-item class="ml300">
          <a-button type="primary" @click="search">Search</a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="primary" @click="add">Add</a-button>
        </a-form-item>
      </a-form>
    </div>-->
    <!-- <div class="tableSection">
      <a-table :data-source="tableData" :customRow="clickKindTable" :pagination="false">
        <a-table-column key="MenuName" title="MenuName" data-index="MenuName" />
        <a-table-column key="MenuAdress" title="MenuAdress" data-index="MenuAdress" />
        <a-table-column key="ParentsName" title="ParentsName" data-index="ParentsName" />
        <a-table-column key="Sort" title="Sort" data-index="Sort" />
        <a-table-column key="CreateTIme" title="CreateTIme" data-index="CreateTIme" />
        <a-table-column key="action" title="Action">
          <template slot-scope="text, record">
            <span>
              <a-button type="primary" @click="editMoudule(text,record)">Edit</a-button>
              <a-button type="primary" @click="delMoudule(text,record)">Delete</a-button>
            </span>
          </template>
        </a-table-column>
      </a-table>

      <a-pagination
        show-quick-jumper
        :default-current="2"
        :total="500"
        @change="changePage"
        class="pagination"
      />
    </div>-->
    <div class="title">菜单管理</div>
    <!--  菜单树 -->
    <div class="flex">
      <MenuAuthTree
        :treeData="treeData"
        class="menuTree"
        @selectedKeyInfo="selectedKeyInfo"
        :expandedKeys="expandedKeys"
      ></MenuAuthTree>
      <div class="btnBox">
        <a-button type="primary" @click="add">Add</a-button>
        <a-button type="primary" @click="editMoudule">Edit</a-button>
        <a-button type="primary" @click="delMoudule">Delete</a-button>
        <!-- <a-button type="primary" @click="AssignedBtn">Permissions</a-button> -->
      </div>
    </div>

    <!-- 弹窗 -->

    <a-modal v-model="modalVisiable" @ok="handleOk" :maskClosable="false" :title="ModalTitle">
      <div>
        <a-form class="mc0" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="MenuName">
            <a-input placeholder v-model.trim="MenuName" allowClear />
          </a-form-item>
          <a-form-item label="MenuId" v-if="doType==='add'">
            <a-input placeholder v-model.trim="MenuId" allowClear />
          </a-form-item>
          <a-form-item label="Set">
            <a-checkbox class="ml55 inline" @change="checkIsActive" v-model="IsCheck">Is Actived</a-checkbox>
            <a-checkbox class="ml55 inline" v-model="IsTop">Is Top</a-checkbox>
          </a-form-item>
          <a-form-item label="SortNum">
            <a-input-number v-model="SortNum" :min="1"></a-input-number>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal
      v-model="MenuBtnVisable"
      @ok="saveMenuBtnAuth"
      :maskClosable="false"
      :title="ModalTitle"
    >
      <div>
        <MenuBtnTree
          :treeData="MenuBtnData"
          :SelectBtnList="SelectBtnList"
          @getBtnAuthInfo="getBtnAuthInfo"
          @checkedBtnKeys="checkedBtnKeys"
        ></MenuBtnTree>
      </div>
    </a-modal>
  </div>
</template>

<script>
import MenuAuthTree from '@/components/tree/MenuAuthTree'
import MenuBtnTree from '@/components/tree/MenuBtnTree'
export default {
  data() {
    return {
      searchText: '',
      tableData: [],
      modalVisiable: false,
      selectMenuName: '',
      treeData: [],
      MenuId: '',
      MenuName: '',
      MenuUrl: '',
      ParentID: '',
      SortNum: 1,
      doType: '',
      IsEnabled: 1, //0 不可用 1可用
      ModalTitle: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      isHasChild: false,
      MenuBtnData: [],
      MenuBtnVisable: false,
      SelectBtnList: [],
      IsCheck: true,
      IsTop: true,
      expandedKeys: [],
      selectNodeArr: '',
    }
  },
  components: {
    MenuAuthTree,
    MenuBtnTree,
  },
  watch: {
    IsCheck() {
      this.IsEnabled = this.IsCheck ? 1 : 0
    },
    IsTop(val) {
      if (val) {
        this.ParentID = ''
      }
    },
    ParentID(val) {
      if (val) {
        this.IsTop = false
      }
    },
  },
  created() {
    this.getMenuInfo()
  },
  methods: {
    search() {},

    add() {
      this.doType = 'add'
      this.ModalTitle = 'Add Menu'
      this.MenuId = ''
      this.MenuName = ''
      this.MenuUrl = ''
      this.ParentID = this.selectNodeArr.MenuId
      this.modalVisiable = true
    },
    clickKindTable(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },
    checkIsActive(e) {
      this.IsEnabled = e ? 1 : 0
    },
    // 分配按钮
    AssignedBtn() {
      if (!this.MenuId) {
        this.$message.warning('Please select the menu')
        return
      }
      this.SelectBtnList = []
      this.ModalTitle = 'Menu assignment button'
      this.getMenuBtnInfo()
      this.MenuBtnVisable = true
    },
    // 编辑模组
    editMoudule() {
      if (!this.MenuId) {
        this.$message.warning('Please select the menu')
        return
      }
      this.doType = 'edit'
      this.ModalTitle = 'Edit Menu'
      this.ParentID = this.selectNodeArr.ParentID
      this.modalVisiable = true
    },
    //删除模组
    delMoudule() {
      this.doType = 'del'
      const that = this
      const a = {
        method: 'SysMenu_Del',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        language: 0,
        datas: {
          MenuId: this.MenuId,
        },
      }
      if (!this.MenuId) {
        this.$message.warning('Please select the menu')
        return
      }
      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Delete this data?',
        onOk() {
          that.$post(a).then((result) => {
            if (result.code == 0) {
              that.$message.success('successfully delete!')
              that.getMenuInfo()
            }
          })
        },
      })
    },
    changePage(pageNumber) {
      console.log('Page: ', pageNumber)
    },
    handleOk() {
      if (this.doType === 'edit') {
        this.editInfo()
      } else if (this.doType === 'add') {
        this.addInfo()
      }
      this.modalVisiable = false
    },
    getMenuBtnInfo() {
      const that = this
      const a = {
        method: 'SysMenuButton_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          MenuId: this.MenuId,
        },
      }
      this.$post(a).then((result) => {
        console.log('result :>> ', result)
        that.$nextTick(() => {
          that.MenuBtnData = result.data
          that.MenuBtnData.map((item) => {
            if (item.IsCheck) {
              that.SelectBtnList.push(item.ButtonId)
            }
          })
        })
      })
    },
    getMenuInfo() {
      const a = {
        method: 'SysMenu_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {},
      }
      this.$post(a).then((result) => {
        console.log('result :>> ', result)
        this.treeData = result.data
      })
    },
    addInfo() {
      const a = {
        method: 'SysMenu_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          MenuId: this.MenuId,
          MenuName: this.MenuName,
          MenuUrl: this.MenuUrl,
          ParentID: this.ParentID,
          SortNum: this.SortNum,
          IsEnabled: this.IsEnabled,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getMenuInfo()
        }
      })
    },
    editInfo() {
      const a = {
        method: 'SysMenu_Mod',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          MenuId: this.MenuId,
          MenuName: this.MenuName,
          MenuUrl: this.MenuUrl,
          ParentID: this.ParentID,
          SortNum: this.SortNum,
          IsEnabled: this.IsEnabled,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getMenuInfo()
        }
      })
    },
    selectedKeyInfo(e) {
      this.clearData()
      console.log('e :>> ', e)
      let arr, childrenArr
      if (e.selectedNodes[0]) {
        arr = e.selectedNodes[0].data.props
        this.selectNodeArr = arr
        console.log('arr :>> ', arr)
        childrenArr = arr.dataRef.sysMenu ? Array.from(arr.dataRef.sysMenu) : []
        console.log('data :>> ', arr)
        this.MenuName = arr.MenuName
        this.MenuId = arr.MenuId
        this.MenuUrl = arr.MenuUrl
        this.SortNum = arr.SortNum
        console.log('name :>> ', arr.MenuName)
      } else {
        this.MenuName = ''
        this.MenuId = ''
        this.MenuUrl = ''
        this.ParentID = '' // 在当前节点添加
        this.SortNum = ''
      }

      if (childrenArr && childrenArr.length > 0) {
        this.isHasChild = true
      } else {
        this.isHasChild = false
      }
    },
    clearData() {
      this.MenuName = ''
      this.MenuId = ''
      this.MenuUrl = ''
      this.ParentID = ''
      this.SortNum = ''
    },
    saveMenuBtnAuth() {
      const a = {
        method: 'SysMenuButton_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          MenuId: this.MenuId,
          SelectList: this.SelectBtnList,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('updated successfully!')
        }
        this.MenuBtnVisable = false
      })
    },
    getBtnAuthInfo(e) {
      console.log('getBtnAuthInfo :>> ', e)
    },
    checkedBtnKeys(e) {
      this.SelectBtnList = e[0]
      console.log('SelectBtnList :>> ', e)
    },
  },
}
</script>

<style lang="less"scoped>
.main {
}
.title {
  display: block;
  margin-bottom: 38px;
  padding-right: 12px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
.menuTree {
  margin-left: 150px;
}
.btnBox {
  display: flex;
  flex-direction: column;
  margin-left: 150px;
  margin-top: 20px;
  /deep/ .ant-btn {
    display: block;
    margin-bottom: 20px;
  }
}
.main {
  padding: 30px;
  padding-top: 50px;
}
.headerInput {
  display: flex;
  width: 100%;
  align-items: center;
  .searchInputBox {
    input {
      width: 280px;
    }
  }
  .ml300 {
    margin-left: 180px;
  }
  .ml50 {
    margin-left: 28px;
  }
}
.tableSection {
  margin-top: 30px;
}

.pagination {
  margin-top: 38px;
  position: absolute;
  right: 100px;
}
.mian {
  background: #f0f2f5;
}
</style>